<template>
  <div class="movie-details-container">
    <!-- 返回按钮 -->
    <button class="back-button" @click="handleBack">
      ← 返回
    </button>

    <!-- 上部信息区域 -->
    <div class="movie-info-section">
      <!-- 左侧海报 -->
      <div class="poster-container">
        <img :src="movieDetails.posterUrl" :alt="movieDetails.title" class="movie-poster">
      </div>
      <!-- 右侧信息 -->
      <div class="info-container">
        <h1 class="movie-title">{{ movieDetails.title }}</h1>
        <div class="movie-meta">
          <span class="rating">{{ movieDetails.rating }} ★</span>
          <span class="release-date">{{ movieDetails.releaseDate }}</span>
          <span class="duration">{{ movieDetails.director }}</span>
        </div>
        <div class="movie-genres">
          <span v-for="genre in movieDetails.genre?.split(',')" :key="genre" class="genre-tag">{{ genre }}</span>
        </div>
        <div class="movie-description">
          <h3>剧情简介</h3>
          <p>{{ movieDetails.description }}</p>
        </div>
      </div>
    </div>

    <!-- 下部季数区域 -->
    <div class="seasons-section">
      <h2>剧集信息</h2>
      <div class="seasons-list">
        <div v-for="season in seasonsArray.sort((a, b) => a.seasonNumber - b.seasonNumber)" :key="season.id"
          class="season-card">
          <div class="season-header">
            <h3>{{ season.title }} </h3>
            <p>首播日期: {{ season.releaseDate }}</p>
          </div>
          <div class="episodes-list">
            <router-link v-for="episode in season.episodes" :key="episode.id" :to="`/movie/details/play/${episode.id}`"
              class="episode-item">
              <span class="episode-number">第 {{ episode.episodeNumber }} 集</span>
              <span class="episode-title">{{ episode.title }}</span>
            </router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRoute, useRouter, RouterLink } from 'vue-router';
import { movieService } from '@/services/movieService';
import { type MovieEpisodes, type Movies } from '@/dataType/movieType';

// 获取路由和路由实例
const route = useRoute();
const router = useRouter();
const movieId = route.params.id as string;

// 返回上一页
const handleBack = () => {
  router.go(-1);
};

// 电影详情数据
const movieDetails = ref<Movies>({} as Movies);
const seasonsArray = ref<Array<{
  id: number;
  movieId: number;     // 关联电影的ID
  seasonNumber: number; // 季编号
  title: string;       // 季标题
  releaseDate: Date;   // 发布日期
  episodes: Array<MovieEpisodes>
}>>([]);



// 组件挂载时获取数据
onMounted(() => {
  if (movieId) {
    movieService.getMovieById(movieId).then(data => {
      movieDetails.value = Object.assign(movieDetails.value, data);
      movieService.getMovieSeasonsByMovieId(data.id).then(data => {
        let seasons = data;
        seasons.forEach(season => {
          movieService.getMovieEpisodeBySeasonId(season.id).then(data => {
            let itemSeason = { ...season, episodes: data };
            seasonsArray.value.push(itemSeason);
          })
        })
      })
    });
  }
});
</script>

<style scoped>
.movie-details-container {
  max-width: 100%;
  margin: 0 auto;
  padding: 15px;
  position: relative;
}

/* 返回按钮样式 */
.back-button {
  position: absolute;
  top: 20px;
  left: 20px;
  padding: 8px 16px;
  background-color: var(--color-background);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text);
}

.back-button:hover {
  background-color: #e2e8f0;
  transform: translateX(-2px);
}

.movie-info-section {
  display: flex;
  gap: 30px;
  margin-bottom: 40px;
  padding-top: 60px;
  /* 为返回按钮留出空间 */
}

.poster-container {
  flex-shrink: 0;
}

.movie-poster {
  width: 300px;
  height: 450px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.info-container {
  flex-grow: 1;
}

.movie-title {
  font-size: 2.2rem;
  margin-bottom: 15px;
  color: #2c3e50;
}

.movie-meta {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
  color: #666;
  font-size: 1.1rem;
}

.rating {
  color: #e74c3c;
  font-weight: bold;
}

.movie-genres {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 25px;
}

.genre-tag {
  background-color: #f1f5f9;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 0.9rem;
  color: #334155;
}

.movie-description h3 {
  font-size: 1.5rem;
  margin-bottom: 10px;
  color: #2c3e50;
}

.movie-description p {
  line-height: 1.6;
  color: var(--color-text);
  font-size: 1.05rem;
}

.seasons-section {
  margin-top: 40px;
}

.seasons-section h2 {
  font-size: 1.8rem;
  margin-bottom: 20px;
  color: var(--color-text);
}

.seasons-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.season-card {
  background-color: #f8fafc;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.season-header {
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e2e8f0;
}

.season-card h3 {
  margin-bottom: 5px;
  color: #2c3e50;
}

.episodes-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
}

.episode-item {
  display: block;
  padding: 8px 12px;
  background-color: #ffffff;
  border-radius: 4px;
  text-decoration: none;
  color: #334155;
  font-size: 0.9rem;
  transition: all 0.2s ease;
  border: 1px solid #e2e8f0;
}

.episode-item:hover {
  background-color: #f1f5f9;
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.episode-number {
  font-weight: bold;
  margin-right: 5px;
}

.episode-title {
  display: block;
  font-size: 0.85rem;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 768px) {
  .movie-info-section {
    flex-direction: column;
    gap: 20px;
    padding-top: 50px;
  }

  .movie-poster {
    width: 100%;
    max-width: 300px;
    height: auto;
    margin: 0 auto;
    display: block;
  }

  .movie-title {
    font-size: 1.6rem;
    text-align: center;
  }

  .movie-meta {
    flex-direction: column;
    gap: 5px;
    align-items: center;
    text-align: center;
  }

  .movie-genres {
    justify-content: center;
  }

  .seasons-list {
    grid-template-columns: 1fr;
  }

  .back-button {
    padding: 6px 12px;
    font-size: 0.9rem;
  }
}
</style>